<template>
  <div class="user-edit">
    <!-- Modal -->
    <Modal
      :title="title"
      v-model="visible"
      width="1000"
      :styles="{top: '20px','border-radius': '15px'}"
      :mask-closable="type == '0'"
      scrollable=true
      transfer
    >
      <div :style="{ maxHeight: maxHeight }" class="drawer-content">
     
        <Form
          ref="form"
          :model="form"
          :rules="ruleValidate"
          label-position="top"
        >
          <Row :gutter="32">
            <Col span="12">
              <FormItem label="身份类型选择：" prop="parkRoleType">
                <Select v-model="form.parkRoleType" transfer placeholder="请选择">
                  <Option v-for="item in idenList" :key="item.id" :value="item.value">{{item.title}}</Option>
                </Select>
              </FormItem>
            </Col>
            <Col span="12" v-if="form.parkRoleType == '1'">
              <FormItem label="身份清零时间：（天）" prop="roleCleanDay">
                <Input v-model="form.roleCleanDay" />
              </FormItem>
            </Col>
          </Row>
          <Row :gutter="32">
            <Col span="12">
              <FormItem label="角色名称：" prop="title">
                <Input v-model="form.title" />
              </FormItem>
            </Col>
             <Col span="12">
              <FormItem label="上传封面（尺寸：710*322）：" prop="cover" class="form-noheight" v-if="form.parkRoleType == '1'">
                <upload-pic-input v-model="form.cover"></upload-pic-input>
              </FormItem>
            </Col>
          </Row>
          <Row :gutter="32">
            <Col span="12">
              <FormItem label="上传Icon(尺寸：60*40)：" class="form-noheight" prop="icon">
                <upload-pic-input v-model="form.icon"></upload-pic-input>
              </FormItem>
            </Col>
            <Col span="12">
              <FormItem label="角色价格：（元）" prop="price" v-if="form.parkRoleType == '1'">
                <Input v-model="form.price" />
              </FormItem>
            </Col>
          </Row>
          <Row :gutter="32" v-if="form.parkRoleType == '1' || form.parkRoleType == '2'">
              <div class="add-section">
                <Col span="12" v-for="(item,index) in form.dataList" :key="index">
                <div class="add-list">
                  <div class="add-content">
                    <span class="label">积分类型</span>
                    <div class="form-item">
                      <FormItem :prop="'dataList.' + index + '.integralTypeId'" :rules="{required: true, message: '请选择积分类型', trigger: 'change'}">
                        <Select v-model="item.integralTypeId" transfer placeholder="请选择">
                          <Option v-for="item in scIntegralTypeList" :key="item.id" :value="item.id">{{item.title}}</Option>
                        </Select>
                      </FormItem>
                      <FormItem :prop="'dataList.' + index + '.count'" :rules="{required: true, message: '请输入分值', trigger: 'blur'}">
                        <Input v-model="item.count" placeholder="请输入分值" />
                      </FormItem>
                    </div>
                    <Button type="primary" v-if="index == 0" @click="adDataList"><Icon type="md-add" size="24" /></Button>
                    <Button type="primary" v-else @click="subdataList(index)"><Icon type="ios-trash-outline" size="24" /></Button>
                  </div>
                  <div class="add-content">
                    <span class="label">积分清零规则</span>
                    <div class="form-item">
                      <FormItem :prop="'dataList.' + index + '.integralCleanId'" :rules="{required: true, message: '请选择积分清零规则', trigger: 'change'}">
                        <Select v-model="item.integralCleanId" transfer placeholder="请选择">
                          <Option v-for="item in scIntegralCleanList" :key="item.id" :value="item.id">{{item.title}}</Option>
                        </Select>
                      </FormItem>
                    </div>
                  </div>
                </div>
                </Col>
              </div>
          </Row>
        </Form>
      </div>
       <div slot="footer">
        <Button type="primary" size="large" :loading="submitLoading" @click="submit">保存</Button>
        <Button size="large" @click="visible = false">取消</Button>
      </div>
      <!-- <div class="drawer-footer br" v-show="type != '0'">
        <Button type="primary" :loading="submitLoading" @click="submit"
          >提交</Button
        >
        <Button @click="visible = false">取消</Button>
      </div> -->
    </Modal>
  </div>
</template>

<script>
import { 
  getScIntegralCleangetAll,
  getScIntegralTypegetAll,
  scParkRoleAdd
} from "@/api/index";

import uploadPicInput from "@/views/my-components/xboot/upload-pic-input";
export default {
  name: "user",
  components: {
    uploadPicInput,
  },
  props: {
    value: {
      type: Boolean,
      default: false,
    },
    data: {
      type: Object,
    },
    type: {
      type: String,
      default: "0",
    },
    idenList: {
      type: Array,
      default: []
    }
  },
  data() {
    return {

      scIntegralTypeList: [], //积分类型
      scIntegralCleanList: [], //积分清零规则
      // companyNature: {},
      visible: this.value,
      title: "",
      passColor: "",
      submitLoading: false,
      maxHeight: 510,
      form: {
        // address: [],
        dataList: [{id:'1', count: '', integralCleanId: '', integralTypeId: ''}],
      },
      ruleValidate: {
        parkRoleType: [
          { required: true, message: "请选择身份类型", trigger: "change" }
        ],
        roleCleanDay: [
          { required: true, message: "请输入身份清零时间", trigger: "blur" }
        ],
        title: [
          { required: true, message: "请输入角色名称", trigger: "blur" }
        ],
        icon: [
          { required: true, message: "请上传Icon", trigger: "change" }
        ],
        price: [
          { required: true, message: "请输入角色价格", trigger: "change" }
        ],
        cover: [
          { required: true, message: "请上传封面", trigger: "change" }
        ],
      },
    };
  },
  methods: {
    init() {
      this.getScIntegralTypegetAllData()
      this.getScIntegralCleangetAllData()
    },
    
    getScIntegralTypegetAllData() {
      getScIntegralTypegetAll().then(res => {
        if (res.success) {
          this.scIntegralTypeList = res.result;
        }
      })
    },
    getScIntegralCleangetAllData() {
      getScIntegralCleangetAll().then(res => {
        if (res.success) {
          this.scIntegralCleanList = res.result
        }
      })
    },

    handleSelectDepTree(v) {
      // this.form.departmentId = v;
    },
    changePass(v, grade, strength) {
      // this.form.passStrength = strength;
    },
    submit() {
      this.$refs.form.validate((valid) => {
        if(valid) {
          let idList = {}
          this.form.dataList.forEach((item, index) => {
            idList['parkRoleIntegrals['+index+'].count'] = item.count
            idList['parkRoleIntegrals['+index+'].integralCleanId'] = item.integralCleanId
            idList['parkRoleIntegrals['+index+'].integralTypeId'] = item.integralTypeId
          })
          let obj = {}
          let apitype = ''
          if(this.type == "1") {
            //修改
            if(this.form.parkRoleType != '1') {
              //身份类型不是个人
              this.form.roleCleanDay = ''
              this.form.cover = ''
              this.form.price = ''
            }
            if(this.form.parkRoleType != '2' && this.form.parkRoleType != '1') {
              idList = {}
              this.form.parkRoleIntegrals = ''
            }
            apitype = 'update'
            obj = {
              ...this.form,
              ...idList
            }
          } else {
            apitype = 'add'
            if(this.form.parkRoleType == '1' || this.form.parkRoleType == '2') {
              obj = {
                ...this.form,
                ...idList
              }
            } else {
              obj = {
                ...this.form,
              }
            }
          }
          console.log(JSON.stringify(obj))
          // return
          scParkRoleAdd(apitype, obj).then(res => {
            
            if (res.success) {
              this.$Message.success("操作成功")
              this.visible = false
              this.$emit("on-submit", true);
            }
          })
        }
      });
    },
    setCurrentValue(value) {
      if (value === this.visible) {
        return;
      }
      this.$refs.form.resetFields()
      if (this.type == "1") {
        this.title = "修改角色";
        let dataList = []
        if(this.data.parkRoleIntegrals.length>0) {
          this.data.parkRoleIntegrals.forEach(item => {
            dataList.push({
              id: item.id, 
              count: item.count.toString(), 
              integralCleanId: item.integralCleanId, 
              integralTypeId: item.integralTypeId
            })
          })
        } else {
          dataList = [{id:'1', count: '', integralCleanId: '', integralTypeId: ''}]
        }
        this.form = { ...this.data, dataList }
        console.log(this.form)
      } else if (this.type == "2") {
        this.title = "添加角色";
        this.form = {dataList: [{id:'1', count: '', integralCleanId: '', integralTypeId: ''}]}
      }
      this.maxHeight =
          Number(document.documentElement.clientHeight - 121) + "px";
      
      this.visible = value;
    },
    adDataList() {
      this.form.dataList.push({id: Date.now()})
    },
    subdataList(index) {
      this.form.dataList.splice(index,1)
    }
  },
  watch: {
    value(val) {
      this.setCurrentValue(val);
    },
    visible(value) {
      this.$emit("input", value);
    },
    
  },
  mounted() {
    this.init()
  },
};
</script>

<style lang="less">
@import "@/styles/drawer-common.less";
.add-section{
  width: 100%;
  display: flex;
  flex-wrap: wrap;
  .label{
    width: 100px;
    margin-top: 6px;
  }
  .ivu-form-item,.add-list{
    flex: 1;
  }
}
.add-content{
  display: flex;
  // flex: 1;
  .form-item{
    display: flex;
    flex: 1;
    justify-content: space-between;
    .ivu-form-item{
      // width: 48%;
      margin-right: 20px;
    }
  }
  .ivu-form-item{
    flex: 1;
  }
  .ivu-btn{
    margin-right: 0;
  }
}
.ivu-modal-footer{
  border: 0 none;
}
</style>

